<template>
  <div class="WidgetGroup">
    <WidgetWrapper
      v-for="(widgetConfig) in childrenReverse"
      :ref="widgetConfig.id"
      :key="widgetConfig.id"
      :widgetConfig="widgetConfig"
      :getComponent="getComponent"
    ></WidgetWrapper>
  </div>
</template>
<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator'
import WidgetConfig from '@/core/model/WidgetConfig'

@Component({
  components: { WidgetWrapper: () => import('../../previewer/WidgetWrapper.vue') }
})
export default class WidgetGroup extends Vue {
  @Prop()
  public widgetConfig!: WidgetConfig

  @Prop()
  public getComponent!: (tag: string) => Vue.Component

  get childrenReverse () {
    const children = this.widgetConfig.children
    const reverse = []
    if (children) {
      for (let index = children.length - 1; index >= 0; index--) {
        reverse.push(children[index])
      }
    }
    return reverse
  }
}
</script>
<style scoped lang="scss">
@import '~@/style/variables.scss';
.WidgetGroup {
  background: red;
}
</style>
